<template>
  <div class="addpadding">
    <div class="padding2"> 
      <van-card
      centered
   

      :title="novel.name"
      :thumb=" novel.picUrl || 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'  "
>
<template #price>
  <div>
     <svg style="vertical-align: middle;" t="1677763974806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23011" width="20" height="20"><path d="M443.904 623.104a281.6 278.016 90 1 0 556.032 0 281.6 278.016 90 1 0-556.032 0Z" fill="#E09B40" p-id="23012"></path><path d="M721.92 604.672m-278.016 0a278.016 278.016 0 1 0 556.032 0 278.016 278.016 0 1 0-556.032 0Z" fill="#FFD151" p-id="23013"></path><path d="M562.688 740.352l159.744-332.288 33.792-79.36c-11.264-1.536-23.04-2.56-34.304-2.56-153.6 0-278.016 124.416-278.016 278.016 0 71.168 27.136 135.68 70.656 184.832l48.128-48.64z" fill="#FFDD99" p-id="23014"></path><path d="M721.92 604.672m-231.424 0a231.424 231.424 0 1 0 462.848 0 231.424 231.424 0 1 0-462.848 0Z" fill="#D39548" p-id="23015"></path><path d="M491.52 612.352a230.912 223.744 0 1 0 461.824 0 230.912 223.744 0 1 0-461.824 0Z" fill="#E6B141" p-id="23016"></path><path d="M662.016 686.592l33.28 10.752 33.28 6.144 40.448-8.704v13.824l-37.376 12.8-34.816-8.704zM668.672 549.376l33.792-10.752 32.768-6.144 40.96 8.192V527.36l-37.376-13.312-35.328 9.216z" fill="#D39548" p-id="23017"></path><path d="M687.104 902.144c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584-0.512-5.632-0.512v21.504zM697.344 903.168c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584 0-5.632-0.512v21.504zM707.584 904.192c2.048 0 3.584 0 5.632 0.512v-22.016h-5.632v21.504zM717.312 904.192s0.512 0.512 0 0c2.048 0.512 3.584 0.512 5.632 0.512v-22.016h-5.632v21.504zM727.552 882.688v22.016h5.632V882.176c-1.536 0-3.584 0.512-5.632 0.512zM843.264 876.544c1.536-1.024 3.584-1.536 5.12-2.56l-9.728-16.896c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.896zM851.968 871.936c1.536-1.024 3.584-2.048 5.12-3.072l-9.728-15.872c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.384zM860.672 866.816c1.536-1.024 3.584-2.048 5.12-3.072l-9.216-15.872c-1.536 1.024-3.584 2.048-5.12 2.56l9.216 16.384zM869.376 861.696l4.608-3.072-9.216-15.36c-1.536 1.024-3.072 2.048-5.12 3.072l9.728 15.36zM868.864 841.216l8.704 14.848 4.608-3.072-8.704-14.848c-1.024 1.024-2.56 2.048-4.608 3.072zM559.104 850.944l4.608 3.072 8.704-14.848-4.608-3.072-8.704 14.848zM567.296 857.088l4.608 3.072 9.216-15.36c-1.536-1.024-3.072-2.048-5.12-3.072l-8.704 15.36zM576 862.72l4.608 3.072 9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.216 15.872zM584.704 867.84c1.536 1.024 3.584 1.536 5.12 2.56l9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.728 16.384zM593.408 872.448c1.536 1.024 3.584 2.048 5.12 2.56l9.728-16.896c-1.536-1.024-3.584-1.536-5.12-2.56l-9.728 16.896z" fill="#EFC04B" p-id="23018"></path><path d="M27.648 408.064a281.6 278.016 90 1 0 556.032 0 281.6 278.016 90 1 0-556.032 0Z" fill="#E09B40" p-id="23019"></path><path d="M305.664 389.632m-278.016 0a278.016 278.016 0 1 0 556.032 0 278.016 278.016 0 1 0-556.032 0Z" fill="#FFD151" p-id="23020"></path><path d="M146.432 525.312l159.744-332.288 33.792-79.36c-11.264-1.536-23.04-2.56-34.304-2.56-153.6 0-278.016 124.416-278.016 278.016 0 71.168 27.136 135.68 70.656 184.832l48.128-48.64z" fill="#FFDD99" p-id="23021"></path><path d="M305.664 389.632m-231.424 0a231.424 231.424 0 1 0 462.848 0 231.424 231.424 0 1 0-462.848 0Z" fill="#D39548" p-id="23022"></path><path d="M75.264 397.312a230.912 223.744 0 1 0 461.824 0 230.912 223.744 0 1 0-461.824 0Z" fill="#E6B141" p-id="23023"></path><path d="M245.248 471.552l33.792 10.752 32.768 6.144 40.96-8.192v13.312l-37.376 12.8-35.328-8.704zM252.416 334.336l33.28-10.752 33.28-6.144 40.448 8.192V312.32l-37.376-12.8-34.816 8.704z" fill="#D39548" p-id="23024"></path><path d="M270.848 687.104c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584-0.512-5.632-0.512v21.504zM281.088 688.128c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584 0-5.632-0.512v21.504zM290.816 689.152c2.048 0 3.584 0 5.632 0.512v-22.016h-5.632v21.504zM301.056 689.152s0 0.512 0 0c2.048 0.512 3.584 0.512 5.632 0.512v-22.016h-5.632v21.504zM311.296 667.648v22.016h5.632V667.136c-2.048 0-3.584 0.512-5.632 0.512zM426.496 661.504c1.536-1.024 3.584-1.536 5.12-2.56l-9.728-16.896c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.896zM435.712 656.896c1.536-1.024 3.584-2.048 5.12-3.072l-9.728-15.872c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.384zM444.416 651.776c1.536-1.024 3.584-2.048 5.12-3.072l-9.216-15.872c-1.536 1.024-3.584 2.048-5.12 2.56l9.216 16.384zM453.12 646.656l4.608-3.072-9.216-15.36c-1.536 1.024-3.072 2.048-5.12 3.072l9.728 15.36zM452.608 626.176l8.704 14.848 4.608-3.072-8.704-14.848-4.608 3.072zM142.848 635.904l4.608 3.072 8.704-14.848-4.608-3.072-8.704 14.848zM151.04 642.048l4.608 3.072 9.216-15.36c-1.536-1.024-3.072-2.048-5.12-3.072l-8.704 15.36zM159.232 647.68l4.608 3.072 9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.216 15.872zM167.936 652.8c1.536 1.024 3.584 1.536 5.12 2.56l9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.728 16.384zM177.152 657.408c1.536 1.024 3.584 2.048 5.12 2.56l9.728-16.896c-1.536-1.024-3.584-1.536-5.12-2.56l-9.728 16.896z" fill="#EFC04B" p-id="23025"></path></svg>
      <span style="vertical-align: middle;  font-size: 0.75rem; color: #9e9e9e;  margin-left: 0.2rem; ">{{ novel.Price }}</span> 
    </div>
</template>       

</van-card>
    </div>

    <van-cell-group   :border="true" >

    </van-cell-group>
    <div>
      <transition name="fade" mode="out-in" appear>
        <div v-if="userstatus == 2">
          <van-cell-group inset>
  <!-- 输入任意文本 -->
    <van-field v-model="fromuserinfo.billingFirstName" label="FirstName"   placeholder="billingLastName"  />
  
    <van-field v-model="fromuserinfo.billingLastName" type="text" label="LastName"   placeholder="billingLastName" />
 
    <van-field v-model="fromuserinfo.billingPhone" type="tel" label="  Phone"   placeholder="billingPhone" />

    <van-field v-model="area2" readonly  @click="areaShow=true"   right-icon="arrow" label="Area"  placeholder="Area" />
    <!-- <van-area title="标题" :area-list="areaList" value="110101" :columns-num="2"/> -->
    <van-field    v-model="fromuserinfo.billingAddress"  label="Address" placeholder="Address"  />
    <van-field    v-model="fromuserinfo.email"  label="email" placeholder="email"  />
      <van-field    v-model="fromuserinfo.cardNo"  label="cardNo" placeholder="cardNo"  />
      <van-field    v-model="fromuserinfo.expYear"  label="expYear" placeholder="expYear"  />
      <van-field    v-model="fromuserinfo.expMonth"  label="expMonth" placeholder="expMonth"  />
      <van-field    v-model="fromuserinfo.cvv"  label="cvv" placeholder="请输入cvv"  />  
      <!-- <van-button @click="onSave" block style="margin-top: 10px;" round color="linear-gradient(to right, #ff6034, #ee0a24)">
        Pay
</van-button> -->
  </van-cell-group>
        </div>
      </transition>
      <transition name="fade" mode="out-in" appear>
        <div v-if="userstatus == 1">
           <div class="flex">
              <div       v-for=" item,index in options"  :key="item.num+index"  @click="selectNum = index" class="priceNum">
                <!-- select 选中样式 -->
                <div class="priceBox "   :class="{ select: selectNum ==index }">
                  <span>{{ item.num }}</span>
                    <svg style="vertical-align: middle;" t="1677763974806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23011" width="20" height="20"><path d="M443.904 623.104a281.6 278.016 90 1 0 556.032 0 281.6 278.016 90 1 0-556.032 0Z" fill="#E09B40" p-id="23012"></path><path d="M721.92 604.672m-278.016 0a278.016 278.016 0 1 0 556.032 0 278.016 278.016 0 1 0-556.032 0Z" fill="#FFD151" p-id="23013"></path><path d="M562.688 740.352l159.744-332.288 33.792-79.36c-11.264-1.536-23.04-2.56-34.304-2.56-153.6 0-278.016 124.416-278.016 278.016 0 71.168 27.136 135.68 70.656 184.832l48.128-48.64z" fill="#FFDD99" p-id="23014"></path><path d="M721.92 604.672m-231.424 0a231.424 231.424 0 1 0 462.848 0 231.424 231.424 0 1 0-462.848 0Z" fill="#D39548" p-id="23015"></path><path d="M491.52 612.352a230.912 223.744 0 1 0 461.824 0 230.912 223.744 0 1 0-461.824 0Z" fill="#E6B141" p-id="23016"></path><path d="M662.016 686.592l33.28 10.752 33.28 6.144 40.448-8.704v13.824l-37.376 12.8-34.816-8.704zM668.672 549.376l33.792-10.752 32.768-6.144 40.96 8.192V527.36l-37.376-13.312-35.328 9.216z" fill="#D39548" p-id="23017"></path><path d="M687.104 902.144c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584-0.512-5.632-0.512v21.504zM697.344 903.168c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584 0-5.632-0.512v21.504zM707.584 904.192c2.048 0 3.584 0 5.632 0.512v-22.016h-5.632v21.504zM717.312 904.192s0.512 0.512 0 0c2.048 0.512 3.584 0.512 5.632 0.512v-22.016h-5.632v21.504zM727.552 882.688v22.016h5.632V882.176c-1.536 0-3.584 0.512-5.632 0.512zM843.264 876.544c1.536-1.024 3.584-1.536 5.12-2.56l-9.728-16.896c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.896zM851.968 871.936c1.536-1.024 3.584-2.048 5.12-3.072l-9.728-15.872c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.384zM860.672 866.816c1.536-1.024 3.584-2.048 5.12-3.072l-9.216-15.872c-1.536 1.024-3.584 2.048-5.12 2.56l9.216 16.384zM869.376 861.696l4.608-3.072-9.216-15.36c-1.536 1.024-3.072 2.048-5.12 3.072l9.728 15.36zM868.864 841.216l8.704 14.848 4.608-3.072-8.704-14.848c-1.024 1.024-2.56 2.048-4.608 3.072zM559.104 850.944l4.608 3.072 8.704-14.848-4.608-3.072-8.704 14.848zM567.296 857.088l4.608 3.072 9.216-15.36c-1.536-1.024-3.072-2.048-5.12-3.072l-8.704 15.36zM576 862.72l4.608 3.072 9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.216 15.872zM584.704 867.84c1.536 1.024 3.584 1.536 5.12 2.56l9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.728 16.384zM593.408 872.448c1.536 1.024 3.584 2.048 5.12 2.56l9.728-16.896c-1.536-1.024-3.584-1.536-5.12-2.56l-9.728 16.896z" fill="#EFC04B" p-id="23018"></path><path d="M27.648 408.064a281.6 278.016 90 1 0 556.032 0 281.6 278.016 90 1 0-556.032 0Z" fill="#E09B40" p-id="23019"></path><path d="M305.664 389.632m-278.016 0a278.016 278.016 0 1 0 556.032 0 278.016 278.016 0 1 0-556.032 0Z" fill="#FFD151" p-id="23020"></path><path d="M146.432 525.312l159.744-332.288 33.792-79.36c-11.264-1.536-23.04-2.56-34.304-2.56-153.6 0-278.016 124.416-278.016 278.016 0 71.168 27.136 135.68 70.656 184.832l48.128-48.64z" fill="#FFDD99" p-id="23021"></path><path d="M305.664 389.632m-231.424 0a231.424 231.424 0 1 0 462.848 0 231.424 231.424 0 1 0-462.848 0Z" fill="#D39548" p-id="23022"></path><path d="M75.264 397.312a230.912 223.744 0 1 0 461.824 0 230.912 223.744 0 1 0-461.824 0Z" fill="#E6B141" p-id="23023"></path><path d="M245.248 471.552l33.792 10.752 32.768 6.144 40.96-8.192v13.312l-37.376 12.8-35.328-8.704zM252.416 334.336l33.28-10.752 33.28-6.144 40.448 8.192V312.32l-37.376-12.8-34.816 8.704z" fill="#D39548" p-id="23024"></path><path d="M270.848 687.104c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584-0.512-5.632-0.512v21.504zM281.088 688.128c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584 0-5.632-0.512v21.504zM290.816 689.152c2.048 0 3.584 0 5.632 0.512v-22.016h-5.632v21.504zM301.056 689.152s0 0.512 0 0c2.048 0.512 3.584 0.512 5.632 0.512v-22.016h-5.632v21.504zM311.296 667.648v22.016h5.632V667.136c-2.048 0-3.584 0.512-5.632 0.512zM426.496 661.504c1.536-1.024 3.584-1.536 5.12-2.56l-9.728-16.896c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.896zM435.712 656.896c1.536-1.024 3.584-2.048 5.12-3.072l-9.728-15.872c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.384zM444.416 651.776c1.536-1.024 3.584-2.048 5.12-3.072l-9.216-15.872c-1.536 1.024-3.584 2.048-5.12 2.56l9.216 16.384zM453.12 646.656l4.608-3.072-9.216-15.36c-1.536 1.024-3.072 2.048-5.12 3.072l9.728 15.36zM452.608 626.176l8.704 14.848 4.608-3.072-8.704-14.848-4.608 3.072zM142.848 635.904l4.608 3.072 8.704-14.848-4.608-3.072-8.704 14.848zM151.04 642.048l4.608 3.072 9.216-15.36c-1.536-1.024-3.072-2.048-5.12-3.072l-8.704 15.36zM159.232 647.68l4.608 3.072 9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.216 15.872zM167.936 652.8c1.536 1.024 3.584 1.536 5.12 2.56l9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.728 16.384zM177.152 657.408c1.536 1.024 3.584 2.048 5.12 2.56l9.728-16.896c-1.536-1.024-3.584-1.536-5.12-2.56l-9.728 16.896z" fill="#EFC04B" p-id="23025"></path></svg>
                    
                 </div>
              <span>     $ {{ item.price }}</span>
              </div>


           </div>
          </div>
      </transition>
      <van-button v-if="userstatus == 0" @click="onSave" block style="margin-top: 10px;" round color="linear-gradient(to right, #ff6034, #ee0a24)">
        Pay
</van-button>
    <van-button v-if="userstatus == 1" @click="onNext" block style="margin-top: 10px;" round color="linear-gradient(to right, #ff6034, #ee0a24)">
        NEXT
</van-button>
    <van-button v-if="userstatus == 2" @click="onPay" block style="margin-top: 10px;" round color="linear-gradient(to right, #ff6034, #ee0a24)">
        Pay
</van-button>
  




 
</div>



<van-popup
 class="pay"  @click.stop   v-model:show="areaShow"
  round
  position="bottom"
  safe-area-inset-bottom
  
>
<van-area title="标题" 
:area-list="areaList" 
:value="areavalue"
@confirm="confirm"
@cancel ="areaShow=false"
:columns-num="2"/>

</van-popup>
    <!-- <van-area   title="标题" :area-list="areaList" /> -->
  </div>
</template>

<script>
// import { Toast  ,Cell, CellGroup} from 'vant';

import { Locale } from 'vant';
// 引入英文语言包
import enUS from 'vant/es/locale/lang/en-US';

Locale.use('en-US', enUS);
import { areaList ,State  } from '@/assets/js/address'
import { Toast } from 'vant';
import {  topay ,tobuyB } from '@api/reader'

export default {
  props:['novel'],
  data() {
    return {
      options:[
        {  id:1, num:500, price:5  },
        { id:2,  num:1500, price:10 },
        {  id:3, num:4000, price:20  },
        { id:4,  num:10000, price:50  },
      ],
      selectNum:1,
      userstatus:0,
      areaList: areaList,
      searchResult: [],
      AddressInfo :{ 
        name:"name"
      },

      areavalue :"",
      
      areaShow:false,
     
      fromuserinfo: 
      process.env.NODE_ENV =='development' ? {
        billingFirstName: "Carlo",
        billingLastName: "Phil",
        billingAddress: "3970  Mesa Drive",
        billingCity: "Las Vegas", 
        billingState: "NV",
        billingCountry: "LV",
        billingZipCode: "3970",
        billingPhone: "702-810-9982",
        cardNo:"4931930110475120",
        expYear:"2026",
        expMonth:"1",
        cvv:"849",
        email:"ekriafipcd@iubridge.com",
      } :  {
        billingFirstName: "",
        billingLastName: "",
        billingAddress: "",
        billingCity: "", 
        billingState: "",
        billingCountry: "",
        billingZipCode: "",
        billingPhone: "",
        cardNo:"",
        expYear:"",
        expMonth:"",
        cvv:"",
        email:"",
      }  
    };
  },
  methods: { 
    confirm(value){
      console.log("123");
      console.log(    value );
      this.areaShow = false
      this.Area = value[0].name +'/'+value[1].name
      this.fromuserinfo.billingState =State[ value[0].name ] 
      this.fromuserinfo.billingCity = value[1].name
      // console.log( this.fromuserinfo);
    
    },

    async  onNext(){
        this.userstatus =2
    },
   async onSave() {
     
      console.log(this.fromuserinfo);
      console.log(   this.$route.query  );
      var data ={  
              id:this.$props.novel.id ,  // 书ID
              returnUrl: location.href,
              extra: this.fromuserinfo,
      }
      if(this.$route.query.id ){
        data.agent = this.$route.query.id
      }
      let  result   =  await topay(data)
    console.log(result);
    // this.$Toast.success(result.message);s
     if(result.code ==20000  ){
        location.reload()
     }else {
      this.$Toast.fail(result.message);
      this.userstatus =1
     }
    //  if(result.code ==20000 && result.data?.payUrl ){
    //     location.href=  result.data.payUrl 
    //  }else {
    //   this.$Toast.fail(result.message);
    //   this.userstatus =1
    //  }
          
    },
    async onPay(){
        console.log("携带参数去支付");
        var data ={  

              id:this.options[this.selectNum].id ,  // 书ID
              returnUrl: location.href,
              extra: this.fromuserinfo,
      }
      
        await tobuyB(data).then( (res)=>{
       this.$Toast.fail(res.message);
        } )

    }


  },
  created(){
    console.log(process.env);
    console.log(this.$Toast );
    this.$on('chose',function(){
      console.log("chose子");
    })
 
  },

  computed: {
    area2:function(){
      return   this.fromuserinfo.billingState+ this.fromuserinfo.billingCity
    }
  },
};
</script>

<style lang="scss" scoped>
.addpadding{
   padding: 1rem 0.2rem;
}
::v-deep .addpadding{
      // margin-top: 1rem;
      padding: 0.3rem;
      box-sizing: border-box;
    span{ 
      font-size: 0.6rem;
    }
  input{ 
    font-size: 0.6rem;
    border-bottom: 1px solid black;
   
  }

}


.address123{ 
   padding: 0 ;
}

.flex{
  display: flex;
  margin-top: 20px;
}


.priceNum{
  text-align: center;
}

// priceBox
.priceBox{
  text-align: center;
  line-height: 2rem;
  width: 2.5rem;
  height: 2rem;
  box-sizing: border-box;
  border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}
.select{
  border: 2px solid #b550ff;
 
}
/* 
 过渡效果
*/
.fade-enter-active {
    transition: all .3s ease;
  }
  .fade-leave-active {
    transition: all 0s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .fade-leave-to{

  }
  .fade-enter
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(50px);
    opacity: 0;
  }
</style>